<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>边距合并</title>

	<style>
		.top,
		.bottom{
			width: 200px;
			height: 200px;
			background-color: pink;
		}
		
		.top {
			margin-bottom: 100px;
		}

		
		/* 只有 上下边距会合并，左右不会。 这里设置上下边距为100 + 1000， 总共距离还是100*/
		.bottom{
			background-color: purple;
			margin-top: 100px;

		}


		/* 塌陷 */
		.father{
			width: 500px;
			height: 500px;
			background-color: blue;

			/*1. 添加一个上边框*/
			/*border-top: 1px solid transparent;*/
			/*2. 给父级指定一个上 padding值*/
			/*padding-top: 1px;*/
			/*3. 可以为父元素添加 overflow:hidden  推荐使用*/
			overflow: hidden;
		}
		.son {
			width: 200px;
			height: 200px;
			margin-top: 100px;
			background-color: orange;
		}

	</style>

</head>
<body>
	<div class="top"></div>
	<div class="bottom"></div>

	<div class="father">
		<div class="son"></div>
	</div>
</body>
</html>